<template>
  <dv-loading v-if="loading">加载中...</dv-loading>
  <div>
    <div>
      <el-row :gutter="16" style="text-align: center">
        <el-col :span="6">
          <div class="statistic-card">
            <el-statistic :value="outputTodayCount">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  今日下单量
                  <el-tooltip effect="dark" content="仅下单付款" placement="top">
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span
                  >比昨日{{ todayAndYesterdayCount * 100 > 0 ? "上升" : "下降" }}</span
                >
                <span :class="todayAndYesterdayCount * 100 > 0 ? 'green' : 'red'">
                  {{ Math.abs(todayAndYesterdayCount * 100).toFixed(0) + "%" }}
                  <el-icon v-if="todayAndYesterdayCount * 100 > 0">
                    <CaretTop />
                  </el-icon>
                  <el-icon v-else>
                    <CaretBottom />
                  </el-icon>
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="statistic-card">
            <el-statistic :value="outputMonthCount">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  本月订单成交量
                  <el-tooltip effect="dark" content="本月全部已收货单数" placement="top">
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span
                  >比上月{{ monthAndlastMonthCount * 100 > 0 ? "提升" : "下降" }}</span
                >
                <span :class="monthAndlastMonthCount * 100 > 0 ? 'green' : 'red'">
                  {{ Math.abs(monthAndlastMonthCount * 100).toFixed(0) + "%" }}
                  <el-icon v-if="monthAndlastMonthCount * 100 > 0">
                    <CaretTop />
                  </el-icon>
                  <el-icon v-else>
                    <CaretBottom />
                  </el-icon>
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="statistic-card">
            <el-statistic :value="outputYearCount" title="New transactions today">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  今年订单成交量
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>比去年{{ lastYearCount * 100 > 0 ? "提升" : "下降" }}</span>
                <span :class="lastYearCount * 100 > 0 ? 'green' : 'red'">
                  {{ Math.abs(lastYearCount * 100).toFixed(0) + "%" }}
                  <el-icon v-if="lastYearCount * 100 > 0">
                    <CaretTop />
                  </el-icon>
                  <el-icon v-else>
                    <CaretBottom />
                  </el-icon>
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="statistic-card">
            <el-statistic :value="outputAllCount" title="New transactions today">
              <template #title>
                <div style="display: inline-flex; align-items: center">订单成交总量</div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div class="footer-item">
                <span>订单好评率</span>
                <span class="green"> {{ acclaim * 100 }}% </span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <dv-decoration-6 style="width: 100%; height: 20px" />

    <div>
      <el-row
        ><el-col :span="11">
          <div style="display: flex; flex-direction: row; justify-content: center">
            <div style="text-align: center">
              热销单数
              <dv-active-ring-chart
                :config="config2"
                style="width: 300px; height: 300px"
              />
            </div>
            <div style="text-align: center">
              热销占比
              <dv-active-ring-chart
                :config="config3"
                style="width: 300px; height: 300px"
              />
            </div>
          </div>
        </el-col>

        <el-col
          :span="1"
          style="display: flex; flex-direction: row; justify-content: space-around"
        >
          <dv-decoration-2 :reverse="true" style="width: 5px; height: 300px" />
        </el-col>
        <el-col :span="11">
          <el-card style="width: 100%" shadow="hover">
            <div style="text-align: center">
              <el-text tag="b" size="large">公告</el-text>
            </div>
            <h1>
              <el-text class="mx-1"> 客户端链接:</el-text>

              <el-link href="http://101.37.85.239:8080" target="_blank" type="primary"
                >http://101.37.85.239:8080</el-link
              >
            </h1>
            <h1>
              <el-text class="mx-1"> 花购管理系统接口文档链接:</el-text>

              <el-link
                href="http://101.37.85.239:7000/doc.html"
                target="_blank"
                type="primary"
                >http://101.37.85.239:7000/doc.html</el-link
              >
            </h1>
            <h1>
              <el-text class="mx-1"> 花购客户端接口文档链接:</el-text>

              <el-link
                href="http://101.37.85.239:7001/doc.html"
                target="_blank"
                type="primary"
                >http://101.37.85.239:7001/doc.html</el-link
              >
            </h1>
            <h1>
              <el-text class="mx-1"> 管理前端远程仓库链接:</el-text>

              <el-link
                href="https://gitee.com/li-xianghui1/shopping-system-ui.git"
                target="_blank"
                type="primary"
                >https://gitee.com/li-xianghui1/shopping-system-ui.git</el-link
              >
            </h1>
            <h1>
              <el-text class="mx-1"> 管理后端远程仓库链接:</el-text>

              <el-link
                href="https://gitee.com/li-xianghui1/shopping-system.git"
                target="_blank"
                type="primary"
                >https://gitee.com/li-xianghui1/shopping-system.git</el-link
              >
            </h1>
            <h1>
              <el-text class="mx-1"> 客户前端远程仓库链接:</el-text>

              <el-link
                href="https://gitee.com/li-xianghui1/shopping-client-ui.git"
                target="_blank"
                type="primary"
                >https://gitee.com/li-xianghui1/shopping-client-ui.git</el-link
              >
            </h1>
            <h1>
              <el-text class="mx-1"> 开发者信息:</el-text>

              <el-text class="mx-1" type="info">
                (李向辉,李婕,柴庆辉,侯勇,马博文)(合肥科技职业学院)</el-text
              >
            </h1>
            <h1>
              <el-text class="mx-1"> 联系方式:</el-text>

              <el-text class="mx-1" type="info"
                >18324729107(手机号) 2815979621(QQ)
              </el-text>
            </h1>
            <h1>
              <el-text class="mx-1" type="info"
                >本系统仅用于参加中国计算机设计大赛学习比赛使用(网络图片素材侵权联系我们删除)</el-text
              >
            </h1>
          </el-card>
        </el-col>
      </el-row>
      <dv-decoration-6 style="width: 100%; height: 20px" />
      <el-row>
        <el-col :span="11">
          <h1 style="text-align: center">热销商品排行榜</h1>
          <dv-scroll-ranking-board :config="config" style="width: 100%; height: 250px" />
        </el-col>
        <el-col
          :span="1"
          style="display: flex; flex-direction: row; justify-content: space-around"
        >
          <dv-decoration-2 :reverse="true" style="width: 5px; height: 300px" />
        </el-col>
        <el-col :span="11">
          <h1 style="text-align: center">我的信息</h1>
          <el-descriptions direction="vertical" border style="margin-top: 20px">
            <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
              <el-image style="width: 100px; height: 100px" :src="userInfo?.avatar" />
            </el-descriptions-item>
            <el-descriptions-item label="昵称">{{
              userInfo?.nickname
            }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{
              userInfo?.gender ? "男" : "女"
            }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{
              userInfo?.mobile
            }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{
              userInfo?.email
            }}</el-descriptions-item>

            <el-descriptions-item label="角色">
              <el-tag size="small">{{ userInfo?.roleName }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              <el-tag size="small">{{ userInfo?.createTime }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import {
  getHotProductList,
  getOrderCount,
} from "@/api/dataVisualization/dataVisualization";
import { ArrowRight, CaretBottom, CaretTop, Warning } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { useTransition } from "@vueuse/core";
import type { Product, User } from "@/types";
const orderCountMonth = ref(null);
const loading = ref(true);
const hotProductList = ref<Product[]>([]);
const orderVolumeTodayCount = ref(0);
const orderVolumeMonthCount = ref(0);
const orderVolumeYearCount = ref(0);
const orderVolumeAllCount = ref(0);
const todayAndYesterdayCount = ref(0);
const monthAndlastMonthCount = ref(0);
const lastYearCount = ref(0);
const acclaim = ref(0);
const hotProductListName: string[] = [];
const hotProductListValue: number[] = [];
const outputAllCount = useTransition(orderVolumeAllCount, {
  duration: 1500,
});
const outputYearCount = useTransition(orderVolumeYearCount, {
  duration: 1500,
});
const outputMonthCount = useTransition(orderVolumeMonthCount, {
  duration: 1500,
});
const outputTodayCount = useTransition(orderVolumeTodayCount, {
  duration: 1500,
});
const userInfo = ref<User>();
const loadUserInfo = () => {
  userInfo.value = JSON.parse(localStorage.getItem("userInfo") || "");
};
const load = async () => {
  //获取订单统计
  await getOrderCount().then((response) => {
    orderVolumeAllCount.value = response.data.data.orderVolumeAllCount;
    orderVolumeYearCount.value = response.data.data.orderVolumeYearCount;
    orderVolumeTodayCount.value = response.data.data.orderVolumeTodayCount;
    orderVolumeMonthCount.value = response.data.data.orderVolumeMonthCount;
    todayAndYesterdayCount.value = response.data.data.todayAndYesterdayCount;
    monthAndlastMonthCount.value = response.data.data.monthAndlastMonthCount;
    lastYearCount.value = response.data.data.lastYearCount;
    acclaim.value = response.data.data.acclaim;
  });
  //获取热销商品列表
  await getHotProductList().then((response) => {
    hotProductList.value = response.data.data;
    hotProductList.value.forEach((item) => {
      hotProductListName.push(item.name);
      hotProductListValue.push(item.vlaue);
    });
  });
  loadUserInfo();
  loading.value = false;
};

const data = ref(hotProductList);
const config = ref({ data, unit: "单" });
const config2 = ref({
  radius: "40%",
  activeRadius: "45%",
  data: hotProductList,
  digitalFlopStyle: {
    fontSize: 20,
    fill: "#000000", // 控制数值颜色
  },
  lineWidth: 10,
  showOriginValue: true,
});
const config3 = ref({
  radius: "40%",
  activeRadius: "45%",
  data: hotProductList,
  digitalFlopStyle: {
    fontSize: 20,
    fill: "#000000", // 控制数值颜色
  },
  lineWidth: 10,
});
onMounted(async () => {
  await load();
});
</script>

<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
  justify-content: space-around;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>
<style lang="less" scoped>
.datav-title {
  text-align: center;
}
.dv-scroll-ranking-board[data-v-26f5f75f] {
  color: #000;
}
.dv-capsule-chart {
  --1b634ae3: #ff0000;
}
.el-row {
  justify-content: center;
}
</style>
<style>
.dv-active-ring-chart .active-ring-info .active-ring-name {
  color: #000 !important;
}
</style>
